@ba-color:#b7d4a8;

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
#main{
    font: bold 20px "Courier";
    width:360px;
    height: 420px;
    background-color: @ba-color;
    border:10px solid black;
    margin:100px auto 0 auto;
    border-radius: 40px;

    // 弹性盒模型更容易上下左右居中对齐
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around; // 把多余的空间均匀分配为子元素的周围

    #stage{
        width:304px;
        height:304px;
        border:2px solid black;
        position: relative;

        #snake{
            position: relative;
            z-index: 10;
            transition: all 100ms linear;
            &>div{
                width: 10px;
                height: 10px;
                background-color: #000;
                border: 1px solid @ba-color;
                border-radius: 2px;
                position: absolute;
                display: block;
                transition: inherit;
                
                &:first-of-type{
                    background-color: transparent;
                    border-color: azure;
                    border-top-right-radius: 50%;
                    border-bottom-right-radius: 50%;
                    border-right-color: #03a9f4;
                    &>span{
                        width: 4px;
                        height: 4px;
                        border: 1px solid black;
                        border-radius: 50%;
                        background-color: white;
                        display: block;
                    }
                    
                }
            }
        }

        &>#food{
            width: 10px;
            height: 10px;
            // background-color: @ba-color;
            background-color: burlywood;
            position: absolute;
            z-index: 9;

            left:40px;
            top:100px;

            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-content: space-between;

            &>div{
                width:4px;
                height:4px;
                background-color: #000;
                transform: rotate(45deg);
            }
        }
    }

    #score-panel{
        width: 300px;
        
        display: flex;
        flex-grow: row;
        justify-content: space-between;
        align-items: center;
        
    }
}
#gameInfo{
    width:360px;
    height:200px;
    margin: 10px auto;
    font-size: 12px;
    transition: all 100ms linear;
    text-align: center;

    button{
        padding:2px 5px;
        margin: 5px;
        height: 24px;
    }

    p{
        text-align: left;
        background-color: rgb(219, 219, 219);
        padding: 10px 5px;
        color: white;
        height: 174px;
        overflow: auto;
    }
}